<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>外边距</title>
		<style>
			<style>
						/* 初始化所有标签的内边距和外边距，写在样式中最开始的位置 */
						*{    /* 通配符:指所有的标签 */
							margin: 0;
							padding: 0;
						}
						.box1{
							width: 400px;
							height: 400px;
							background-color: pink;
							/* 设置块级盒子水平居中: 给盒子的左右外边距设置为auto(自动的)*/
							/* margin: 10px auto 0; */
							margin-bottom: 80px;
						}
						.box2{
							width: 300px;
							height: 300px;
							background-color: skyblue;
							margin-top: 120px;
						}
						/* 
						外边距问题1:相邻块级元素垂直外边距合并.
						  解决:一般只给其中一个盒子设置外边距.
						外边距问题2：嵌套块级盒子之间外边距的塌陷。
						  解决方法1：给父盒子添加边框;
						  解决方法2：给父盒子添加内边距，但是会导致父盒子被撑大。
						  解决方法3：给父盒子添加样式overflow: hidden; 使用最多的解决方式。
						*/
					   .bigbox{
						   width: 600px;
						   height: 600px;
						   background-color: red;
						   margin-top: 100px;
						   /* border: 1px solid black; */
						   /* padding-top: 100px; */
						   overflow: hidden;   /* 超出部分隐藏,能解决外边距塌陷问题 */
					   }
					   .sbox{
						   width: 300px;
						   height: 300px;
						   background-color: green;
						   margin-top: 100px;
					   }
					</style>
	</head>
	<body>
		<div class="box1"></div>
				<div class="box2"></div>
				<div class="bigbox">
					<div class="sbox"></div>
				</div>
	</body>
</html>
